<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>高德</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html,body,#container{
            height:calc(100% - 17px);
            width:100%;
        }
        .btn{
            width:8rem;
            margin-left:2.8rem;   
        }
       .btn {
       display: inline-block;
       font-weight: 400;
       text-align: center;
       white-space: nowrap;
       vertical-align: middle;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       border: 1px solid transparent;
       transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
       background-color: transparent;
       background-image: none;
       color: #25A5F7;
       border-color: #25A5F7;
       padding: .25rem .5rem;
       line-height: 1.5;
       border-radius: 1rem;
       -webkit-appearance: button;
       cursor:pointer;
       }

       .btn:hover {
       color: #fff;
       background-color: #25A5F7;
       border-color: #25A5F7
       }

</style>
</head>
<body>
<div style=" height: 50px; line-height: 50px; padding: 0px 10px;">
    要查询的地址：<input id="address" type="text" value="湖南省长沙市岳麓区学士街道云栖路508号瑞盛云栖谷" style="margin:0 10px 10px 30px; width:50%;"/>
    <button type="button" onclick="searchByStationName();" class="btn">标注地址</button>
    <button type="button" onclick="window.close();" class="btn">关闭</button>
</div>
<div id="container"></div>

<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'9b777e38a0224e125a4a3e1c71ed6716',
        }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=0dd96152dff35a0847e33109e94323c1&plugin=AMap.Geocoder"></script>
<script type="text/javascript">
       var address;
            address=opener.document.getElementById("paddress").value;
            if(address !=''){document.getElementById("address").value = address;}
        var map, MGeocoder, lnglatXY;
                //加载地图，调用浏览器定位服务
                map = new AMap.Map('container', {
                    resizeEnable: true,
                    zoom:15,//级别
                    center: new AMap.LngLat(112.962228, 28.22082),//中心点坐标
                    viewMode:'2D'//使用3D视图
                });
        var marker = new AMap.Marker(); //初始化一个poi
        //根据位置查询位置
        var geocoder = new AMap.Geocoder({
              city: "全国", //城市设为北京，默认：“全国”
            });
            // address
            geocoder.getLocation(address, function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                map.clearMap();
                var lnglat = result.geocodes[0].location;
                //给窗口赋值
                opener.document.getElementById("paddress").value=address;
                opener.document.getElementById("lng").value = lnglat.lng;//打印拖动结束坐标
                opener.document.getElementById("lat").value = lnglat.lat;//打印拖动结束坐标
                //标记坐标
                marker.setPosition(lnglat);
                map.add(marker);
                map.setFitView(marker);
            }else{
                console.log('根据地址查询位置失败');
            }
        });

        map.on('click',function(e){
               regeoCode(e);
         })
        //根据位置获得坐标
        function searchByStationName() {
          address = document.getElementById("address").value;
          geocoder.getLocation(address, function(status, result) {
                console.log(result);
            if (status === 'complete'&&result.geocodes.length) {
                 map.clearMap();
                var lnglat = result.geocodes[0].location;
                //给窗口赋值
                opener.document.getElementById("paddress").value=address;
                opener.document.getElementById("lng").value = lnglat.lng;//打印拖动结束坐标
                opener.document.getElementById("lat").value = lnglat.lat;//打印拖动结束坐标
                //标记坐标
                marker.setPosition(lnglat);
                map.add(marker);
                map.setFitView(marker);
            }else{
                console.log('根据地址查询位置失败');
            }
        })
      }

        //根据坐标获得位置
        function regeoCode(e) {
          var lnglat  =  e.lnglat;
          addMarker(e)
           geocoder.getAddress(lnglat, function(status, result) {
               console.log(result);
                  if (status === 'complete'&&result.regeocode) {
                   var address = result.regeocode.formattedAddress;
                   document.getElementById('address').value = address;
               }else{
                  console.log('根据经纬度查询地址失败')
               }
           });
        }

        //鼠标点击，添加标记
        function addMarker(e) {
                  map.clearMap();
                  var x = e.lnglat.getLng();
                  var y = e.lnglat.getLat();
                  lnglatXY = new AMap.LngLat(x, y);
                  var marker = new AMap.Marker({
                  map: map,
                  icon: new AMap.Icon({
                  image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png" ,
                  size: new AMap.Size(58, 30),
                  imageOffset: new AMap.Pixel(-0, -0),
                  }),
                  position: lnglatXY,
                  offset: new AMap.Pixel(-5, -30),
                  // 设置是否可以拖拽
                  draggable: true,
                  cursor: 'move',
                  });
                  map.setFitView(marker);//绘制标记，地图缩放
                  // marker.setMap(map);//绘制标记，地图不缩放
                  // map.add(marker);//绘制标记
                  //移动标记获得坐标
                  marker.on('dragend', function(e) {
                    regeoCode(e);
                  console.log(marker.getPosition())

                   });
        }

</script>
</body>
</html>